<template>
    <div>
        <!-- 三个div盒子 -->
        <div>卡券列表</div>
        <div>添加卡券</div>
        <div>卡券领取列表</div>
        <!-- <routerlink></routerlink> -->
        <!-- 搜索框  一行 -->
        <el-select v-model="value" clearable placeholder="全部类型">
         <el-option
            v-for="item in cardListType.typename"
            :key="item"
            :label="item"
            :value="item"
            />
         </el-select>
         <el-select v-model="value" clearable placeholder="全部状态">
         <el-option
            v-for="item in ['未过期','已过期']"
            :key="item"
            :label="item"
            :value="item"
            />
         </el-select>
         <el-input v-model="input" placeholder="优惠券名称" />

         <!-- 右边三个按钮 -->
         <el-button type="primary" props="">+新建</el-button>
         <el-button>批量投放</el-button>
         <el-button>批量删除</el-button>

         <!-- 优惠券表格  啊，我不会做-->
         <el-table
            ref="singleTableRef"
            :data="tableData"
            highlight-current-row
            style="width: 100%"
            @current-change="handleCurrentChange"
             >
            <el-table-column type="selection" width="50" />
            <el-table-column property="date" label="Date" width="120" />
            <el-table-column property="name" label="Name" width="120" />
            <el-table-column property="address" label="Address" />
        </el-table>
    </div>
</template>

<script setup>
import { ref } from 'vue'
const input = ref('3折优惠券')
const card_list=[
{id: 1001, typename: '代金券',deduction:'10.00元',Effectiveperiod:'2019/04/10 00:00 ~ 2019/04/17 23:59', name:'10元优惠券',state:'已过期', threshold: '50.00', total: '500',distributions:11,used:8,Enable:false},
{id: 1002, typename: '折扣券',deduction:'9.8折',Effectiveperiod:'领券3天后生效，有效期7天', name:'10元优惠券',state:'已过期', threshold: '50.00', total: '500',distributions:22,used:8,Enable:false}
]
const cardListType={
    typename:['代金券','折扣券'],
    state:['已过期','未过期'],
    name:null
}
console.log(input.value)
</script>

<style lang="scss" scoped></style>